<template>
  <div class="audit-demo">
    <Detail title="审核">
      <template #action-bar>
        <div class="action-bar">
          <van-button round block type="danger" :loading="loading" @click="handleAudit(false)">不通过</van-button>
          <van-button round block type="primary" :loading="loading" @click="handleAudit(true)">通过</van-button>
        </div>
      </template>
    </Detail>
    <DialogTextarea ref="dialogTextarea" v-model:show="showDialog" :success-callback="audit"></DialogTextarea>
  </div>
</template>

<script lang="ts">
export default {
  name: 'CrudAuditDemo'
}
</script>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue'
import Detail from './detail.vue'
import { Notify, Dialog } from 'vant'
import { useRouter } from 'vue-router'
import { loadAudit } from '@/api/demo'
import { useStore } from '@/store/index'

const DialogTextarea = defineAsyncComponent(() => import('@/components/DialogTextarea/DialogTextarea.vue'))

const router = useRouter()

const store = useStore()

const showDialog = ref(false)

const loading = ref(false)

const handleAudit = (type: boolean) => {
  if (type) {
    Dialog.confirm({
      message: '确定通过?'
    }).then(() => {
      audit()
    })
  } else {
    showDialog.value = true
  }
}

const dialogTextarea = ref({
  textarea: ''
})

const audit = async () => {
  loading.value = true
  try {
    await loadAudit()
    Notify('操作成功')
    router.back()
    store.commit('cacheView/RESET_CACHE_VIEW', 'CrudListDemo')
    return true
  } catch (error) {
    console.error('error =>', error)
  } finally {
    loading.value = false
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/form.scss';
</style>
